<script setup>
import { defineEmits, defineProps } from 'vue'
import { useClipboardText } from '@/composables/useClipboardText.js'
const { copyText } = useClipboardText()
const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  isModelClose: {
    type: Boolean,
    default: true
  },
  text: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '云南文旅网络舆情速报'
  }
})
const emit = defineEmits(['update:show', 'confirm'])

const closeDialog = () => {
  if (props.isModelClose) {
    emit('update:show', false)
  }
}

const confirm = () => {
  copyText(props.title + '\n' + props.text, '速报复制成功^_^')
  emit('update:show', false)
  emit('confirm')
}
</script>

<template>
  <van-overlay :show="show" z-index="100">
    <div
      class="box-border w-full h-full grid place-items-center"
      @click.stop="closeDialog"
    >
      <div
        class="box-border w-290px h-450px pb-65px bg-#FFFFFF rounded-4px p-16px relative overflow-hidden"
        @click.stop
      >
        <div
          class="bg-#F8F9FC rounded-4px w-full h-full box-border p-8px flex flex-col"
        >
          <h3 class="m-0 text-16px font-600 leading-22px text-#1E2226">
            {{ title }}
          </h3>
          <div
            class="flex-1 overflow-x-hidden overflow-y-auto box-border scroll-smooth"
          >
            <span
              class="whitespace-pre-wrap text-wrap text-14px font-400 leading-24px text-#54565C"
              >{{ text }}</span
            >
          </div>
        </div>
        <div
          class="flex w-full box-border items-center justify-center absolute bottom-0 left-0 h-50px border-t-1px border-t-solid border-t-#ECEDF0"
          @click="confirm"
        >
          <span
            class="text-#229F60 text-16px font-500 leading-22px active:text-#0F472BFF"
            >复制</span
          >
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<style scoped lang="less">
.van-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
